<template>
    <view class="content">
        <button @click="toLogin" v-show="!isLogin">登录</button>
        <button @click="logout" v-show="isLogin">退出登录</button>
        <custom-swiper :image-list="banners"></custom-swiper>
        <view class="box" @click="toProduct">
            <view>
                <image src="../../static/mendian.png" mode=""></image>
                <view class="text">门店自取</view>
                <view>点单无需排队</view>
            </view>
            <view>
                <image src="../../static/waimai.png" mode=""></image>
                <view class="text">外卖</view>
                <view>配送到家</view>
            </view>
        </view>
        <view class="info">

            <view>
                <view>积分签到</view>
                <view>点击了解详情</view>
                <image src="../../static/qd.png"></image>
            </view>
            <view>
                <view>积分签到</view>
                <view>点击了解详情</view>
                <image src="../../static/qd.png"></image>
            </view>
            <view>
                <view>积分签到</view>
                <view>点击了解详情</view>
                <image src="../../static/qd.png"></image>
            </view>
        </view>
    </view>
</template>

<script>
import { get_image_list_by_type } from "apis/image.js";
export default {
    data() {
        return {
            title: 'Hello',
            id: "",
            banners: [],
            isLogin: false,
        }
    },
    onLoad(option) {
        get_image_list_by_type(1, res => {
            console.log(res.data);
            this.banners = res.data;
        }, () => { });
    },
    onShow(option) {
        uni.getStorage("useInfo")
            .then(res => {
                this.isLogin = true;
            })
            .catch(res => {
                this.isLogin = false;
            })
    },
    methods: {
        toLogin() {
            uni.navigateTo({
                url: "/pages/login/index"
            })
        },
        toProduct() {
            uni.navigateTo({
                url: "/pages/product/index"
            })
        },
        logout() {
            uni.clearStorage();
            uni.showToast({
                title: "Logout Successful"
            });
            setTimeout(() => {
                uni.navigateTo({
                    url: "/pages/login/index"
                })
                this.isLogin = false;
            }, 3000);
        }
    }
}
</script>

<style>
.content {
    background: rgb(245, 245, 245);
    height: 100%;
}

uni-page-body {
    height: 100%;
}

.info>view view:nth-child(1) {
    font-size: 35rpx;
    font-weight: bold;
}

.info>view view:nth-child(2) {
    font-size: 16rpx;
    color: #ccc;
    margin: 15rpx auto;
}

.info>view {
    /* 内边距 */
    padding: 35rpx;
    /* 外边距 */
    margin: 10rpx;
    border-radius: 35rpx;
}

.info>view:nth-child(1) {
    background: rgb(245, 246, 250);
}

.info>view:nth-child(2) {
    background: rgb(253, 247, 235);
}

.info>view:nth-child(3) {
    background: rgb(242, 246, 229);
}

.info,
.box {
    display: flex;
    /* 横轴 */
    justify-content: space-around;
    /* 纵轴 */
    align-items: center;
    /* 文本居中 */
    text-align: center;



}

.box {

    /* 内边距 */
    padding: 50rpx;
    /* 外边距 */
    margin: 10rpx;
    /* 背景色 */
    background: #fff;
    /* 圆角矩形 */
    border-radius: 35rpx;
}

.box>view {
    width: 50%;
}

/* 选中box下第一个view */
.box>view:nth-child(1) {
    border-right: 1px solid #000
}

.text {
    font-weight: bold;
    font-size: 37rpx;
    margin: 15rpx auto;
}

.box image,
.info image {
    width: 150rpx;
    height: 150rpx;
}
</style>
